<template>
  <div class="p-4">
    <div class="mb-3 font-medium text-gray-700">输入框值</div>
    <el-input v-model="inputValue" placeholder="请输入默认值" @input="updateInput"></el-input>

    <div class="mt-4 mb-3 font-medium text-gray-700">占位文本</div>
    <el-input
      v-model="inputPlaceholder"
      placeholder="请输入占位文本"
      @input="updateInput"
    ></el-input>

    <div class="mt-4 mb-3 font-medium text-gray-700">输入类型</div>
    <el-select
      v-model="inputType"
      placeholder="请选择输入框类型"
      @change="updateInput"
      class="w-full"
    >
      <el-option label="文本" value="text"></el-option>
      <el-option label="密码" value="password"></el-option>
      <el-option label="数字" value="number"></el-option>
      <el-option label="邮箱" value="email"></el-option>
      <el-option label="日期" value="date"></el-option>
    </el-select>

    <div class="mt-4 mb-3 font-medium text-gray-700">其他选项</div>
    <el-checkbox v-model="isDisabled" @change="updateInput">禁用状态</el-checkbox>
    <el-checkbox v-model="isClearable" @change="updateInput">可清空</el-checkbox>

    <div class="mt-4 mb-3 font-medium text-gray-700">输入框大小</div>
    <el-radio-group v-model="inputSize" @change="updateInput">
      <el-radio value="large" >大</el-radio>
      <el-radio value="default">中</el-radio>
      <el-radio value="small">小</el-radio>
    </el-radio-group>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useLowCodeStore } from '../../store/lowcode'

const store = useLowCodeStore()

// 表单值
const inputValue = ref('')
const inputPlaceholder = ref('')
const inputType = ref('text')
const isDisabled = ref(false)
const isClearable = ref(false)
const inputSize = ref('default')

// 初始化时从当前选中组件获取值
onMounted(() => {
  initFromComponent()
})

// 监听选中组件变化
watch(
  () => store.nowComponent,
  () => {
    initFromComponent()
  },
  { deep: true },
)

// 从当前选中组件初始化表单值
const initFromComponent = () => {
  if (store.nowComponent && store.nowComponent.props) {
    const props = store.nowComponent.props
    inputValue.value = props.value || ''
    inputPlaceholder.value = props.placeholder || ''
    inputType.value = props.type || 'text'
    isDisabled.value = props.disabled || false
    isClearable.value = props.clearable || false
    inputSize.value = props.size || 'default'
  }
}

// 更新输入框配置
const updateInput = () => {
  const component = store.nowComponent

  // 确保props对象存在
  if (!component.props) {
    component.props = {}
  }

  component.props.value = inputValue.value
  component.props.placeholder = inputPlaceholder.value
  component.props.type = inputType.value
  component.props.disabled = isDisabled.value
  component.props.clearable = isClearable.value
  component.props.size = inputSize.value

  store.updateNowComponents(component)
}
</script>
